<!--动态添加材料组件 材料板块的子组件-->
<template>
	<el-form :model="msform" ref="msform" label-width="100px" class="demo-ruleForm">
		<el-form-item :inline="true" label="材料:">
			<!-- 渲染问题列表 -->
			<section v-for="(value, index) in msform.mstitle" :key="index">
				<section v-if="index === 0">
					<el-row>
						<el-col :span="6">
							<el-input :disabled="edits" v-model="msform.mstitle[index]" placeholder="如:五花肉" clearable @keyup.enter.native="addms(index, '1')" />
						</el-col>
						<el-col class="msnum" :span="4">
							<el-input :disabled="edits" v-model="msform.msnumber[index]" placeholder="如:250g" clearable @keyup.enter.native="addms(index, '1')" />
						</el-col>
						<el-col :span="4">
							<el-button :disabled="edits" type="primary" icon="el-icon-plus" plain style="margin-left:10px;" circle @click="addms(index, '1')" />
						</el-col>
					</el-row>
				</section>
				<section v-if="index>0">
					<!-- 添加的子项目 -->
					<el-row style="margin-top:10px;">
						<el-col :span="6">
							<el-input :disabled="edits" v-model="msform.mstitle[index]" placeholder="如:五花肉" clearable
							 @keyup.enter.native="addms(index, '1')" />
						</el-col>
						<el-col class="msnum" :span="4">
							<el-input :disabled="edits" v-model="msform.msnumber[index]" placeholder="如:250g" clearable
							 @keyup.enter.native="addms(index, '1')" />
						</el-col>
						<el-col :span="4">
							<el-button :disabled="edits" type="danger" icon="el-icon-delete" plain style="margin-left:10px;" circle @click="removems(index, '1')" />
						</el-col>
					</el-row>
				</section>
			</section>
		</el-form-item>
		<el-form-item>
			<!--确认 收集数据给父组件并禁用文本框  编辑是文本框可编辑-->
			<el-button type="success" @click="sub">确认</el-button>
			<el-button type="primary" @click="editsStatus">编辑</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
  data () {
    return {
      // 材料提交表单
      edits: false, // disabled编辑或禁用状态
      msform: {
        mstitle: [''], // 材料标题
        msnumber: [''], // 材料单位
        allms: [] // 收集所有材料
      }
    }
  },
  methods: {
    // 添加一组材料及为空判断
    addms (index, type) {
      const lastitem = this.msform.mstitle[this.msform.mstitle.length - 1]
      const lastitem2 = this.msform.msnumber[this.msform.msnumber.length - 1]
      if (lastitem.trim() === '' || lastitem2.trim() === '') {
        this.$message.error('请您填写完一项后继续追加')
      } else {
        this.msform.mstitle.push('')
      }
    },
    // 删除一组材料
    removems (index, type) {
      this.msform.mstitle.splice(index, 1)
      this.msform.msnumber.splice(index, 1)
      this.$message.success('移除成功')
    },
    // 收集全部材料，文本框禁用并把数据传给父组件
    sub () {
      // 信息是否为空判断
      for (var i = 0; i < this.msform.mstitle.length; i++) {
        // 每循环一次，得到一个材料对象，然后加入到数组里
        var m = {
          mstitle: this.msform.mstitle[i],
          msnumber: this.msform.msnumber[i]
        }
        this.msform.allms[i] = m // 存入数组
      }

      this.edits = true // 禁用文本框
      // console.log(this.msform.allms);
      this.$emit('msEvent', this.msform.allms) // 把数据传给父组件
    },
    // 编辑按钮 启用文本框
    editsStatus () {
      this.edits = false
    }
  }
}
</script>

<style>
	.msnum {
		margin-left: 1.25rem;
	}
</style>
